import React from 'react';
import { useTodo } from '../context/TodoContext';

function TodoItem({ todo, navigationContext }) {
  const { toggleTodo, deleteTodo } = useTodo();
  
  const categoryClasses = {
    work: 'demo3-todo-category work',
    personal: 'demo3-todo-category personal',
    shopping: 'demo3-todo-category shopping'
  };
  
  const categoryLabels = {
    work: '工作',
    personal: '个人',
    shopping: '购物'
  };
  
  const handleView = () => {
    navigationContext.navigate(`/todo/${todo.id}`);
  };
  
  return (
    <li className="demo3-todo-item">
      <input
        type="checkbox"
        className="demo3-todo-checkbox"
        checked={todo.completed}
        onChange={() => toggleTodo(todo.id)}
      />
      <p className={`demo3-todo-text ${todo.completed ? 'completed' : ''}`}>
        {todo.text}
      </p>
      <span className={categoryClasses[todo.category]}>
        {categoryLabels[todo.category]}
      </span>
      <div className="demo3-todo-actions">
        <button 
          className="demo3-todo-view"
          onClick={handleView}
          aria-label="查看详情"
        >
          👁️
        </button>
        <button 
          className="demo3-todo-delete"
          onClick={() => deleteTodo(todo.id)}
          aria-label="删除"
        >
          ×
        </button>
      </div>
    </li>
  );
}

export default TodoItem; 